<template>
    <div class="woodenFishContent">
        <audio ref="audioRefPlay" :src="audioSrc" preload="auto"></audio>
        <div class="woodenFishBox">
            <div class="meritD">
                <div v-show="isTip" class="merit">
                    <span>{{ '功德+1' }}</span>
                </div>
            </div>
            <div class="woodenFishItem" @keyup.enter="knock" @click="knock">
                <SvgIcon width="200px" height="200px" name="woodenFish" color="#f5c3cb" :class="{ active: isActive }"></SvgIcon>
            </div>
        </div>
    </div>
</template>
    
<script setup lang="ts">
import { ref, onMounted, computed, onUnmounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { showToast, showFailToast } from 'vant'
import audioUrl from '@/assets/music/woodenFish.wav'


const route = useRoute()
const router = useRouter()

const audioSrc = ref<any>(audioUrl)
// audioSrc.value = '../../../../../public/music/' + val + '.mp3'
const audioRefPlay = ref<any>(null)

const play = () => {
    audioRefPlay.value.play()
}

const knock = () => {
    handleClick()
    play()
}

const isActive = ref<boolean>(false)
const isTip = ref<boolean>(false)

const handleClick = () => {
    isActive.value = !isActive.value
    setTimeout(() => {
        isActive.value = !isActive.value
    }, 100)
    isTip.value = true
    setTimeout(() => {
        isTip.value = false
    }, 500)
}


onMounted(() => {
    
});

onUnmounted(() => {
});

</script>


<style lang="scss" scoped>
.woodenFishContent {
    width: 100%;
    height: auto;
    position: relative;
    padding: 15px;
    .woodenFishBox {
        width: 100%;
        min-height: 70vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        .active {
            // background-color: blue; /* 改变背景颜色 */
            transform: scale(1.2); /* 放大按钮 */
        }
        .meritD {
            min-width: 100px;
            min-height: 50px;
            .merit {
                font-size: 30px;
                font-weight: 700;
                opacity: 0;
                animation: showtip 1s;
                display: flex;
                align-items: center;
                justify-content: center;
            }
        }
        @keyframes showtip {
            0% {
                opacity: 1;
                transform: translateY(0);
            }
            100% {
                opacity: 0;
                transform: translateY(-15px);
            }
        }
    }
}
</style>